<template>
  <div class="Home">
    <!-- 顶部搜索栏 -->
    <div class="searchBox">
        <van-icon class="iconfont icon-zhibo van-tabbar-item--active" class-prefix='home'></van-icon>
        <van-search v-model="value" placeholder="请输入搜索关键词"  @search="onSearch" @cancel="onCancel" @click-input="toRouter('/search')" />
        <van-icon class="iconfont icon-Cloudupload-Filled van-tabbar-item--active" class-prefix='home'></van-icon>
    </div>
    <!-- /顶部搜索栏 -->

    <!-- tab切换栏 -->
    <van-tabs v-model:active="active" animated swipeable>
      <van-tab v-for="index in 8" :title="'标签' + index" :key="index">
        <ShowListComponent descript="并将每个组件放置在其各自的文件中" imgaddr="http://www.baidu.com"  authorAvatar="asd" authorAppellation="sdsa" contentFlags="'1'" v-for="indexs in 20" :key="indexs" />
      </van-tab>
    </van-tabs>
    <!-- /tab切换栏 -->


    <!-- 底部切换栏 -->
    <van-tabbar v-model="active" >
      <van-tabbar-item  to="/" >
        <van-icon class="iconfont icon-Home1" class-prefix='home'></van-icon>
        <div >首页</div>
      </van-tabbar-item>
      <van-tabbar-item   to="/video">
        <van-icon class="iconfont icon-video" class-prefix='home'></van-icon>
        <div>视频</div>
      </van-tabbar-item>
      <van-tabbar-item  to="/message">
        <van-icon class="iconfont icon-xiaoxi" class-prefix='home'></van-icon>
        <div>消息</div>
      </van-tabbar-item>
      <van-tabbar-item  to="/livebroadcast">
        <van-icon class="iconfont icon-zhibo" class-prefix='home'></van-icon>
        <div>直播</div>
      </van-tabbar-item>
      <van-tabbar-item  to="/user">
        <van-icon class="iconfont icon-yonghu" class-prefix='home'></van-icon>
        <div>用户</div>
      </van-tabbar-item>
    </van-tabbar>
    <!-- /底部切换栏-->

  </div>
  
</template>

<script lang="ts">
import { Toast,Tab,Tabs } from 'vant';
import { ref, defineComponent } from 'vue';

export default defineComponent({
  name: 'Home',

  components: {

    // 咨询列表组件
    ShowListComponent: () => import ('@/components/NewsList/NewsList.vue'),
  },
  data() {
    // 用户频道列表
    tabList : []
  },
  setup: () => {
    const count = ref(0);
    // const value = ref('');
    // const onSearch = (val) => Toast(val);
    const active = ref(0);
    const onCancel = () => Toast('取消');
    return { 
      count,
      // value,
      // onSearch,
      onCancel,
      active,
    }
  }
})
</script>
<style lang="scss" scoped>
.Home {
  .searchBox {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0 10px;
    .iconfont{
      font-size: 30px;
    }
    .van-search{
      flex: 1;
    }
  }


  .van-tabbar {
    .van-tabbar-item {
      .van-tabbar-item__text {
        i{
          display: block;
          text-align: center;
          font-size: 20px;
        }
        div {
          font-size: 15px;
        }
      }
    }
  }
  
}
</style>
